<template>
    <el-dialog v-model="visable" title="添加客易达会员通应用" width="580px" draggable>
        <div class="dialog-content">
            <p>
                添加客易达会员通应用后，可以为各店铺启用客易达会员通，启用后，客户在会员小程序上入会，绑定该店铺下的订单，计算积分和成长值。
            </p>
            <p>
                客易达会员通需要配合客易达会员小程序使用，如尚未使用可在
                <span class="router-active" @click="toMiniAppPage">小程序页面</span>
                添加
            </p>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="doCancel">取消</el-button>
                <el-button type="primary" @click="toSubmit">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: true
    }
});

const emit = defineEmits(['update:modelValue', 'submit']);

// 弹窗显隐,通过外部v-model需要用计算属性做代理处理才行
const visable = computed({
    get() {
        return props.modelValue;
    },
    set(value) {
        emit('update:modelValue', value);
    }
});

/**
 * 取消关闭弹窗
 */
const doCancel = () => {
    emit('update:modelValue', false);
};
/**
 * 确认触发回调
 */
const toSubmit = () => {
    emit('submit');
};

/**
 * 前往小程序页面
 */
const toMiniAppPage = () => {
    window.open(`${location.origin}/channelconfig/qywechat/marketingApplet`);
};
</script>
<style lang="scss" scoped>
.dialog-content {
    padding: 12px 14px 24px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #33302d;
    line-height: 20px;
}
.router-active {
    color: var(--el-color-primary);
    cursor: pointer;
}
</style>
